<!-- TYPEAHEAD TEMPLATE -->
<script type="text/ng-template" id="customTemplate.html">
  <a>
    <dl>
      <dt >{{ match.model.Student.FullName }} - {{ match.model.ContactType.Name }}</dt>
      <dd ng-show="match.model.contact.Address"><i class="simple-icon-pointer"></i>&nbsp;&nbsp;&nbsp;{{ match.model.Address }}, {{ match.model.City.Name }}, {{ match.model.PostalCode }}</dd>
      <dd ng-show="match.model.Email"><i class="simple-icon-envelope-open"></i>&nbsp;&nbsp;&nbsp;{{ match.model.Email }}</dd>
      <dd ng-show="match.model.Phone"><i class="simple-icon-call-end"></i>&nbsp;&nbsp;&nbsp;{{ match.model.Phone }}</dd>
      <dd ng-show="match.model.Fax"><i class="simple-icon-envelope-letter"></i>&nbsp;&nbsp;&nbsp;{{ match.model.Fax }}</dd>
    </dl>
  </a>
</script>

<form  name="studentForm" role="form" ng-submit="updateStudent()">
  <div class="row">
    <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 form-column">
      <h4 class="form-header">Profile Picture</h4>
      <img ng-src="{{ (item.ProfilePictureUrl) ? 'http://afas42.bali.ialf.edu/images/photo/'+item.ProfilePictureUrl : 'http://placehold.it/320x320' }}" class="img-responsive">
      <p><a href="#">Change picture..</a></p>
    </div>

    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 form-column">
      <h4 class="form-header">General Information</h4>

      <div class="form-group" ng-class="{ 'has-error': errors.FullName}">
        <label class="required" for="fullname">Full Name</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10">
            <input type="text" name="fullname" class="form-control" id="fullname" placeholder="Full Name" ng-model="currentStudent.FullName" required>
          </div>
        </div>
        <error-widget field="errors.FullName"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.NickName}">
        <label for="nickname">Nickname</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10">
            <input type="text" name="nickname" class="form-control" id="nickname" placeholder="Nickname" ng-model="currentStudent.NickName">
          </div>
        </div>
        <error-widget field="errors.NickName"></error-widget>
      </div>

      <div class="form-group" ng-click="openDatepicker($event, 0)"  ng-class="{ 'has-error': errors.DoB}">
        <label class="required" for="">Date of Birth</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <div class="input-group">
              <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="currentStudent.DoB" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" required />
              <input type="text" class="form-control" ng-disabled="true" ng-value="currentStudent.DoB | date: 'dd MMMM yyyy'">
              <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
            </div>
          </div>
        </div>
        <error-widget field="errors.DoB"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Sex}">
        <label class="required" for="optionsRadios">Gender</label><br>
        <label ng-repeat="sex in Sexes" class="radio-inline">
          <input type="radio" name="optionsRadios" id="optionsRadios{{ sex.Id }}" ng-value="{{ sex.Id }}" ng-model="currentStudent.Sex"> {{ sex.Label }}
        </label>
        <error-widget field="errors.Sex"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Phone}">
        <label for="">Phone Number</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" class="form-control" id="" placeholder="Input field" ng-model="currentStudent.Phone">
          </div>
        </div>
        <error-widget field="errors.Phone"></error-widget>
      </div>

      <!-- <div class="form-group" ng-class="{ 'has-error': errors.Email}">
        <label for="">Email</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8">
            <input type="text" class="form-control" id="" placeholder="Input field" ng-model="currentStudent.Email">
          </div>
        </div>
        <error-widget field="errors.Email"></error-widget>
      </div> -->

      <div class="form-group" ng-class="{ 'has-error': errors.Occupation}">
        <label class="required" for="occupation">Occupation</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-7">
            <select name="occupation" id="occupation" class="form-control" ng-model="currentStudent.Occupation.Id" ng-options="occupation.Id as occupation.Name for occupation in occupations" required>
              <option value="" ng-hide="currentStudent.Occupation.Id">Select an occupation</option>
            </select>
          </div>
        </div>
        <error-widget field="errors.Occupation"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 form-column">
      <h4 class="form-header">Contact Information</h4>

      <form  name="studentForm" role="form" ng-submit="searchContacts()">
        <div class="form-group input-group">
          <input type="text" ng-model="customSelected" placeholder="Enter student name" typeahead="contact as (contact.Address + ' - ' + contact.ContactType.Name ) for contact in searchContacts($viewValue)" typeahead-loading="loadingLocations" typeahead-template-url="customTemplate.html" class="form-control" typeahead-on-select="onSelect($item, $model, $label); asyncSelected = '';">
        </div>
      </form>

      <p><a href ng-click="addNewContact()">Add new contact..</a></p>

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8">
          <dl ng-repeat="contact in currentStudent.Contacts" class="dl-bordered">
            <dt>{{ contact.ContactType.Name }} <a href ng-click="editContact(contact)"><i class="fa fa-pencil"></i></a>&nbsp;<a href="" ng-click="removeContact(contact)">&times;</a></dt>
            <dd class="text-muted" ng-show="contact.Address"><i class="simple-icon-pointer"></i>&nbsp;&nbsp;&nbsp;{{ contact.Address }}, {{ contact.City.Name }}, {{ contact.PostalCode }}</dd>
            <dd class="text-muted" ng-show="contact.Email"><i class="simple-icon-envelope-open"></i>&nbsp;&nbsp;&nbsp;{{ contact.Email }}</dd>
            <dd class="text-muted" ng-show="contact.Phone"><i class="simple-icon-call-end"></i>&nbsp;&nbsp;&nbsp;{{ contact.Phone }}</dd>
            <dd class="text-muted" ng-show="contact.Fax"><i class="simple-icon-envelope-letter"></i>&nbsp;&nbsp;&nbsp;{{ contact.Fax }}</dd>
          </dl>
        </div>
      </div>

    </div>
  </div>
</form>

<!-- SLIDE PANEL -->
<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psFormNew">
  <div style="padding:20px">
    <h3>Create New Contact <a href="" ng-click="reset()"><i class="simple-icon-close"></i></a></h3>
    <hr>

    <form class="form-horizontal" role="form" ng-submit="addContact()">

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
          <div class="form-group" ng-class="{ 'has-error': errors.ContactType}">
            <label class="required" for="ct">Contact Type</label>
            <select name="ct" id="ct" class="form-control" ng-model="contactNew.ContactType.Id" ng-options="ct.Id as ct.Name for ct in contacttypes">
              <option value="" ng-hide="contactNew.ContactType.Id">Select Contact Type</option>
            </select>
            <error-widget field="errors.ContactType"></error-widget>
          </div>
        </div>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Address}">
        <label class="required" for="address">Address</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <input type="text" name="address" id="address" class="form-control" ng-model="contactNew.Address" />
            <!-- <textarea name="address" id="address" cols="30" rows="10" class="form-control" ng-model="contactNew.Address"></textarea> -->
          </div>
        </div>
        <error-widget field="errors.Address"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.PostalCode}">
        <label class="required" for="postal">Postal Code</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="postal" id="postal" class="form-control" ng-model="contactNew.PostalCode">
          </div>
        </div>
        <error-widget field="errors.PostalCode"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.City}">
        <label class="required" for="city">Cities</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-7">
            <select name="city" id="city" class="form-control" ng-model="contactNew.City.Id" ng-options="city.Id as city.Name for city in cities">
              <option value="" ng-hide="contactNew.City.Id">Select City</option>
            </select>
          </div>
        </div>
        <error-widget field="errors.City"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Email}">
        <label class="required" for="email">Email</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-7">
            <input type="text" name="email" id="email" class="form-control" ng-model="contactNew.Email">
          </div>
        </div>
        <error-widget field="errors.Email"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Phone}">
        <label class="required" for="phone">Phone</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="phone" id="phone" class="form-control" ng-model="contactNew.Phone">
          </div>
        </div>
        <error-widget field="errors.Phone"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Fax}">
        <label class="required" for="fax">Fax</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="fax" id="fax" class="form-control" ng-model="contactNew.Fax">
          </div>
        </div>
        <error-widget field="errors.Fax"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</pageslide>

<!-- SLIDE PANEL -->
<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psFormEdit">
  <div style="padding:20px">
    <h3>Edit Contact <a href ng-click="reset()"><i class="simple-icon-close"></i></a></h3>
    <hr>

    <form class="form-horizontal" role="form" ng-submit="updateContact()">

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
          <div class="form-group" ng-class="{ 'has-error': errors.ContactType}">
            <label class="required" for="ct">Contact Type</label>
            <select name="ct" id="ct" class="form-control" ng-model="currentContact.ContactType.Id" ng-options="ct.Id as ct.Name for ct in contacttypes">
              <option value="" ng-hide="currentContact.ContactType.Id">Select Contact Type</option>
            </select>
            <error-widget field="errors.ContactType"></error-widget>
          </div>
        </div>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Address}">
        <label class="required" for="address">Address</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <input type="text" name="address" id="address" class="form-control" ng-model="currentContact.Address" />
            <!-- <textarea name="address" id="address" cols="30" rows="10" class="form-control" ng-model="currentContact.Address"></textarea> -->
          </div>
        </div>
        <error-widget field="errors.Address"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.PostalCode}">
        <label class="required" for="postal">Postal Code</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="postal" id="postal" class="form-control" ng-model="currentContact.PostalCode">
          </div>
        </div>
        <error-widget field="errors.PostalCode"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.City}">
        <label class="required" for="city">Cities</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-7">
            <select name="city" id="city" class="form-control" ng-model="currentContact.City.Id" ng-options="city.Id as city.Name for city in cities">
              <option value="" ng-hide="currentContact.City.Id">Select City</option>
            </select>
          </div>
        </div>
        <error-widget field="errors.City"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Email}">
        <label class="required" for="email">Email</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-9 col-lg-7">
            <input type="text" name="email" id="email" class="form-control" ng-model="currentContact.Email">
          </div>
        </div>
        <error-widget field="errors.Email"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Phone}">
        <label class="required" for="phone">Phone</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="phone" id="phone" class="form-control" ng-model="currentContact.Phone">
          </div>
        </div>
        <error-widget field="errors.Phone"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Fax}">
        <label class="required" for="fax">Fax</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <input type="text" name="fax" id="fax" class="form-control" ng-model="currentContact.Fax">
          </div>
        </div>
        <error-widget field="errors.Fax"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</pageslide>